<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" @Launchform="Launchform" />
    <el-card style="margin-top: 15px" shadow="always" :body-style="{ padding: '5px' }">
      <div style="display: flex">
        <div style="width: 50%" slot=" header">
          <h1 style="font-weight: 600">{{ $t(`Print.ConditionOfTheUnderfaceMatching`) }}</h1>
          <Table
            :summaryData="summaryData"
            summary
            @currentRow="clicktogetdata"
            :TableHeight="100"
            :outTableHeight="70"
            :tableData="SurfaceAndBottomData.list"
            :tableHeader="tableHeader"
            :isLoading="isLoading"
          />
        </div>

        <div style="margin-left: 14px; width: 40%" slot="header">
          <h1 style="font-weight: 600">{{ $t(`Print.MatchingDetailsOfTheBottomOfTheFace`) }}</h1>
          <Table
            :summaryData="summaryData1"
            summary
            :tableData="TableDateLa.list"
            :tableHeader="tableHeader2"
            :TableHeight="100"
            :outTableHeight="70"
            :isLoading="isLoading1"
          />
        </div>
      </div>
      <PageModule :PageData="{ total }" @pageChange="handleSizeChange" @pageSizeChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'SurfaceBottomMatching'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { onMounted, ref } from 'vue'
import { BottomWarehouseEntryOrder, NumberdetailData } from '@/api/GeneralManager/Factoryinquiry/SurfaceBottomMatching'
import type {
  BottomWarehouseEntryOrderInterface,
  FaceBottomParameter,
  NumberdetailDataInterface
} from '@/api/GeneralManager/Factoryinquiry/SurfaceBottomMatching'

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  // {
  //   type: 'button',
  //   checkboxLabel: '导出配套资料(号码)'
  // },
  // {
  //   type: 'button',
  //   checkboxLabel: '导出日常报表'
  // },
  {
    type: 'checkbox',
    checkboxLabel: '鞋面已配套',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '大底已配套',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '鞋垫已配套',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '中底板已配套',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '鞋面库存',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '大底库存',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '鞋垫库存',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '鞋带库存',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '配套库存',
    checked: false
  }
])

const isLoading = ref(true)
const isLoading1 = ref(true)

// 面底参数
const FaceBottomParameT = ref<FaceBottomParameter>({
  inSoleMatch: '',
  inSoleStock: '',
  lotNo: '',
  matchStock: '',
  pageNum: 1,
  pageSize: 40,
  schStock: '',
  soleMatch: '',
  soleStock: '',
  stitchMatch: '',
  stitchStock: '',
  style: ''
})

const clicktogetdata = (row: any) => {
  const { lotNo } = row || {}
  lotNoT.value = lotNo
  isLoading1.value = true
  if (lotNoT.value !== '') {
    GetNumberDetails()
  }
}

// 面底数据
const SurfaceAndBottomData = ref<BottomWarehouseEntryOrderInterface>({
  list: [],
  sums: []
})

// 收集指令
const lotNoT = ref<string>('')

// 面底配套明细
const TableDateLa = ref<NumberdetailDataInterface>({
  stitchSum: 0,
  soleSum: 0,
  matchSum: 0,
  insoleSum: 0,
  list: []
})

const GetNumberDetails = async () => {
  const result = await NumberdetailData(lotNoT.value)
  console.log(result)
  TableDateLa.value.list = result.list
  console.log(result.list)

  summaryData1.value[0].num = result.list.reduce((item: any, _index) => {
    item += _index.stitchStock
    return item
  }, 0)

  summaryData1.value[1].num = result.list.reduce((item: any, _index) => {
    item += _index.soleStock
    return item
  }, 0)

  summaryData1.value[2].num = result.list.reduce((item: any, _index) => {
    item += _index.matchQty
    return item
  }, 0)

  // summaryData1.value[3].num = result.list.reduce((item: any, _index) => {
  //   item += _index.midSoleStock
  //   return item
  // }, 0)

  // summaryData1.value[4].num = result.list.reduce((item: any, _index) => {
  //   item += _index.matchQty
  //   return item
  // }, 0)

  isLoading1.value = false
}

// 获取面底配套数据
const BottomWarehouseEntryQuery = async () => {
  isLoading.value = true
  const result = await BottomWarehouseEntryOrder(FaceBottomParameT.value)
  total.value = result.total!
  const { lotNo } = result.list[0] || {}
  SurfaceAndBottomData.value.list = result.list
  summaryData.value[0].num = result.sums[0]?.ORDER_TOTAL || 0
  summaryData.value[1].num = result.sums[0]?.STITCH_TOTAL || 0
  summaryData.value[2].num = result.sums[0]?.SOLE_TOTAL || 0
  summaryData.value[3].num = result.sums[0]?.MATCH_TOTAL || 0
  // summaryData.value[4].num = result.sums[0]?.SCH_TOTAL || 0
  // summaryData.value[5].num = result.sums[0]?.MATCH_TOTAL || 0
  lotNoT.value = lotNo
  isLoading.value = false
  if (lotNoT.value !== '') {
    GetNumberDetails()
  }
}

const interAceFunct = () => {
  // 底仓入库查询
  BottomWarehouseEntryQuery()

  // 下拉框数据
  // ObtainDataFromTheDropDownBox()
}

onMounted(() => {
  interAceFunct()
})

const summaryData = ref<summaryDataType[]>([
  {
    index: 2,
    num: 0
  },
  {
    index: 4,
    num: 0
  },
  {
    index: 5,
    num: 0
  },
  {
    index: 6,
    num: 0
  },
  {
    index: 7,
    num: 0
  },
  {
    index: 8,
    num: 0
  }
])

const summaryData1 = ref<summaryDataType[]>([
  {
    index: 2,
    num: 0
  },
  {
    index: 3,
    num: 0
  },
  {
    index: 4,
    num: 0
  },
  {
    index: 5,
    num: 0
  },
  {
    index: 6,
    num: 0
  }
])

interface summaryDataType {
  index: number
  num: number | undefined
}

const tableHeader = ref([
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '型体',
    prop: 'style',
    sortable: true
  },
  {
    label: '订单数量  ',
    prop: 'orderQty'
  },
  {
    label: '鞋面已发',
    prop: 'stitchOutQty'
  },
  {
    label: '鞋面库存',
    prop: 'stitchStock',
    sortable: true
  },
  {
    label: '大底库存',
    prop: 'soleStock',
    sortable: true
  },
  // {
  //   label: '鞋垫库存',
  //   prop: 'inSoleStock',
  //   sortable: true
  // },
  // {
  //   label: '鞋带库存',
  //   prop: 'schStock',
  //   sortable: true
  // },
  {
    label: '配套库存',
    prop: 'matchStock',
    sortable: true
  }
])

const tableHeader2 = ref([
  {
    label: '号码',
    prop: 'sizeNo'
  },
  {
    label: '订单数量',
    prop: 'orderQty',
    sortable: true
  },
  {
    label: '鞋面库存  ',
    prop: 'stitchStock'
  },
  {
    label: '大底库存',
    prop: 'soleStock'
  },
  // {
  //   label: '鞋垫库存',
  //   prop: 'inSoleStock',
  //   sortable: true
  // },
  // {
  //   label: '中底库存',
  //   prop: 'midSoleStock',
  //   sortable: true
  // },
  {
    label: '配套数量',
    prop: 'matchQty',
    sortable: true
  }
])

// 分页器
const total = ref(0)

const handleSizeChange = (val: number) => {
  FaceBottomParameT.value.pageNum = val
  BottomWarehouseEntryQuery()
}

const handleCurrentChange = (val: number) => {
  FaceBottomParameT.value.pageSize = val
  BottomWarehouseEntryQuery()
}

const Launchform = (val: any) => {
  console.log(val)
  FaceBottomParameT.value.lotNo = val[0].inputValue
  FaceBottomParameT.value.style = val[1].inputValue
  FaceBottomParameT.value.stitchMatch = val[3].checked === true ? '1' : '0'
  FaceBottomParameT.value.soleMatch = val[4].checked === true ? '1' : '0'
  FaceBottomParameT.value.inSoleMatch = val[5].checked === true ? '1' : '0'
  FaceBottomParameT.value.stitchStock = val[6].checked === true ? '1' : '0'
  FaceBottomParameT.value.soleStock = val[7].checked === true ? '1' : '0'
  FaceBottomParameT.value.inSoleStock = val[8].checked === true ? '1' : '0'
  FaceBottomParameT.value.matchStock = val[9].checked === true ? '1' : '0'
  FaceBottomParameT.value.schStock = val[10].checked === true ? '1' : '0'
  BottomWarehouseEntryQuery()
}

const findClicked = (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
}

const clearFormList1 = () => {
  formList.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    } else if (item.type === 'checkbox') {
      item.checked = false
    }
  })
}
</script>

<style lang="less" scoped>
.btns {
  display: flex;
}

h1 {
  font-size: 14px;
}
</style>
